<template>
  <div class="ser-table">
    <div class="header-box" style="background: #fff">
      <div class="search" style="display: flex">
        <el-input
          placeholder="请输入搜索内容"
          v-model="searchValue"
          size="mini"
          clearable
        >
        </el-input>
        <div style="display: flex">
          <div class="search-btn active" @click="btnClick('query')">
            <i class="el-icon-search"></i>
            <span>查询</span>
          </div>
          <div class="search-btn" @click="btnClick('reset')">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </div>
        </div>
      </div>
    </div>

    <div class="service-table">
      <el-table
        class="mytable"
        :data="tableData"
        height="450"
        row-key="id"
        :default-sort="{ prop: 'ip', order: 'descending' }"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>
        <template v-for="{ prop, label } in colConfigs">
          <el-table-column
            v-if="['title', 'ip', 'callCnt'].includes(prop)"
            show-overflow-tooltip
            contenteditable="true"
            :key="prop"
            :prop="prop"
            :label="label"
            sortable
          >
          </el-table-column>
          <el-table-column
            v-else
            show-overflow-tooltip
            :key="prop"
            :prop="prop"
            :label="label"
          >
          </el-table-column>
        </template>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <img
              class="img-css img-hover"
              src="../../images/handle.png"
              alt=""
              @click="handleClick(scope)"
            />
            <!-- <i class="el-icon-delete" @click="handleClick(scope)"></i> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: {
    value: {
      type: Boolean,
    },
    typeServices: {
      type: Array,
    },
  },
  data() {
    return {
      serTabVisible: false,
      searchValue: "",
      colConfigs: [
        { prop: "title", label: "服务名称" },
        { prop: "ip", label: "IP" },
        { prop: "type", label: "类型" },
        { prop: "status", label: "状态" },
        { prop: "callCnt", label: "调用次数" }, //0代表地图服务 1代表功能服务
        { prop: "successCnt", label: "成功次数" },
        { prop: "failCnt", label: "失败次数" },
        { prop: "responseTimeMax", label: "最大响应时间" },
        { prop: "responseTimePl", label: "平台响应时间" }, //0代表地图服务 1代表功能服务
        { prop: "statisticalTime", label: "统计时间" },
      ],

      tableData: [],
      infos: {
        title: "练习场", //功能标题
        desc: "表格的练习，数据使用了mockjs模拟数据", //功能描述
        methodDesc: [
          "实现表格高度自适应",
          "height:calc(100% - 固定px);overflow-y: auto;",
        ], //实现原理
      },
      notes:
        "### mockjs 1 mockjs的简单使用  2 安装 npm install mockjs  3 直接在方法中先require('mockjs')，然后定义data，最后使用Mock.mock ",
    };
  },
  watch: {
    value(val) {
      this.serTabVisible = val;
    },
  },
  mounted() {
    this.getTable();
  },
  methods: {
    saveInfo(desc) {
      this.infos.methodDesc = desc;
    },
    sendInfo() {
      this.$emit("getInfo", this.infos, this.notes);
    },
    btnClick(type) {
      if (type === "query") {
        this.getTable();
        // return;
      } else if (type === "reset") {
        return;
      } else if (type === "back") {
        this.serTabVisible = false;
        this.$emit("input", false);
      }
    },
    handleClick(row) {
      console.log(row);
    },
    async getTable() {
      // var Mock = require("mockjs");
      // var temData = {
      //   status: 200,
      //   msg: "操作成功！",
      //   data: {
      //     totalPage: 4,
      //     "productList|33": [
      //       {
      //         id: "@increment",
      //         title: "@cword('零一二三四五六七八九十')",
      //         ip: "@ip",
      //         type: "2",
      //         status: "1",
      //         callCnt: "@integer( 0, 300 )",
      //         successCnt: "@integer( 5, 300 )",
      //         failCnt: "@integer( 5, 300 )",
      //         responseTimeMax: "@natural( 0, 60 )",
      //         responseTimePl: "@natural( 0, 60 )",
      //         statisticalTime: "@natural( 0, 60 )",
      //       },
      //     ],
      //   },
      // };
      // Mock.mock(
      //   /\/geoplat\/application\/getApplicationByAccessCount/,
      //   "post",
      //   temData
      // );
      
      let params = new FormData();
      params.append("pageSize", 10);
      params.append("pageNum", 1);
      if (this.searchValue) {
        params.append("title", this.searchValue);
      }
      // const result = await axios.post(
      //   "/geoplat/application/getApplicationByAccessCount/",
      //   params
      // );
      const result1 = await axios.post(
        "/geoplat/log/getIpCountByName/"
      );
      console.log('result3',result1)
      // this.tableData = result.data.data.productList;
      // this.tableDataToTree();
    },
    // 处理表格数据，转树结构
    tableDataToTree() {
      let result = [];
      this.tableData.forEach((item) => {
        let par = [];
        par = result.find(
          (cur) => cur.title === item.title && cur.id != item.id
        );
        if (par) {
          if (!par.children) {
            par.children = [];
          }
          par.children.push(item);
        } else {
          result.push(item);
        }
      });
      this.tableData = result;
    },
    // 实现表格可编辑
    // formatter(row,column,cellValue){
    //   const span = document.createElement('span',{
    //     onclick:(e)=>{
    //       console.log('e',e)
    //     }
    //   },cellValue)
    //   return span
    // }
  },
};
</script>
<style scoped>
.search {
  width: 40%;
  margin: 0 10px;
  height: 46px;
  line-height: 46px;
  /* background-color: #fff; */
}
.search-btn {
  width: 80px;
  height: 30px;
  border: 1px solid #2872fe;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  line-height: 46px;
  margin: 7px 0 7px 12px;

  cursor: pointer;
}
.search-btn i {
  line-height: 30px;
  color: #2872fe;
}
.search-btn span {
  display: block;
  line-height: 30px;
  font-size: 14px;
  color: #2872fe;
}
.search-btn.active {
  background: #2872fe;
}
.search-btn.active i,
.search-btn.active span {
  color: #fff !important;
}

/* 表格 */
.service-table {
  margin: 12px;
}
/* 头 */
.service-table /deep/ th {
  padding: 0px;
  /* background: #ecf4ff; */
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  /* color: #666666; */
}
.service-table /deep/ td {
  padding: 0px;
}

.service-table /deep/ th .cell {
  padding: 0px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #666666;
}
.service-table /deep/ td .cell {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 17px;
}

.img-css:hover {
  content: url("../../images/handle_active.png");
}
</style>